<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getCategoryBrandlistAPI, getCategoryListAPI } from '@/API/category'
//组件命名
defineOptions({
  name: 'category'
})

//左侧商品列表
const categoryList = ref<any>([])
const getCategoryList = async () => {
  const res = await getCategoryListAPI()
  categoryList.value = res.data
}
const index1 = ref()
//控制左侧高亮
const active = ref(0)
const onChange = (index: number) => {
  index1.value = index
  getCategoryBrandlist(index)
}

//右侧商品列表
const categoryBrandList = ref<any>([])
const getCategoryBrandlist = async (index: number) => {
  const res = await getCategoryBrandlistAPI(categoryList.value[index])
  categoryBrandList.value = res.data
  console.log(res)
}

//点击返回到上一页面
const onClickLeft = () => history.back()
//获取某分类下某品牌的产品列表

onMounted(() => {
  getCategoryList(), getCategoryBrandlist(0)
})
</script>

<template>
  <van-nav-bar title="分类" fixed left-text="返回" left-arrow @click-left="onClickLeft" />

  <div class="gatetory">
    <van-sidebar v-model="active" @change="onChange" >
      <van-sidebar-item v-for="item in categoryList" :key="item" :title="item" />
    </van-sidebar>

    <van-grid v-if="categoryBrandList.length" class="right">
      <van-grid-item v-for="item in categoryBrandList" :key="item" @click="router.push(`/goodslist?brand=${item.brand}&category=${categoryList[index1]}`)" icon="fire-o" :text="item.brand"> </van-grid-item>
    </van-grid>
    <van-empty description="改列表为空" v-else />
  </div>
</template>

<style scoped lang="less">
.gatetory {
  margin-top: 46px;
  display: flex;
  align-items: start;
  .right{
   flex: 1;
  }
}
</style>
